<template>
  <el-scrollbar wrap-class="scrollbar-wrapper" style="height:100%;">
    <el-menu
      :collapse="isCollapse"
      :default-active="'/' + $router.currentRoute.name"
      background-color="#304156"
      text-color="#fff"
      active-text-color="#ffd04b"
      style="height:100%;overflow-y: auto;"
    >
      <template v-for="(item, index) in sideMenu">
        <template v-if="item.child && item.child.length > 0">
          <el-submenu :index="item.path" :key="'t-' + index">
            <template slot="title">
              <i
                :class="item.icon"
                v-if="typeof item.icon != 'undefined' && item.icon"
              ></i>
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item
              :index="subitem.path"
              v-for="(subitem, subindex) in item.child"
              :key="'s-' + subindex"
              @click="$router.push({ path: subitem.path })"
              :route="subitem.path"
              class="sub-menu-item"
            >
              {{ subitem.title }}
            </el-menu-item>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item
            :index="item.path"
            @click="$router.push({ path: item.path })"
            :key="'t-' + index"
            :route="item.path"
          >
            <i
              :class="item.icon"
              v-if="typeof item.icon != 'undefined' && item.icon"
            ></i>
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </el-scrollbar>
</template>

<script>
export default {
  name: "SideMenu",
  data() {
    return {
      sideMenu: {},
      defaultActive: null,
      isCollapse: false
    };
  },
  props: {
    sideCollapse: {
      type: Boolean,
      default: false
    }
  },
  created() {
    console.log(this.$config.sideMenu);
    this.sideMenu = this.$config.sideMenu;
    // let _menu = this.$utils.sessionGet('menu');
    // if (_menu) {
    //     this.sideMenu = JSON.parse(_menu);
    //     // this.sideMenu = this.$config.sideMenu;
    // }
    // this.defaultActive = this.$route.path;
  },
  watch: {
    sideCollapse(n, o) {
      console.log(o);
      this.isCollapse = n;
    }
  },
  mounted() {
    // console.log(this.defaultActive);
  },
  methods: {
    // handleOpen(key, keyPath) {
    //     console.log(key, keyPath);
    // },
    // handleClose(key, keyPath) {
    //     console.log(key, keyPath);
    // },
    // addTab(item) {
    //     // this.$router.push({path:item.path})
    //     console.log(item);
    //     this.$emit('addTab', item);
    // },
    // openBlank(path) {
    //     console.log(path);
    //     let _path = process.env.BASE_URL.replaceAll('/', '');
    //     let _a = this.$router.resolve({path: path});
    //     window.open(_a.href, 'blank');
    //     event.stopPropagation();
    // }
  }
};
</script>
